<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title>模拟select</title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        body
        {
            margin: 0;
            width: 100%;
            height: 10000px;
        }
        main
        {
            width: 302px;
            height: 50px;
            margin: 50px auto;
            /* border: 1px solid lightgray; */
        }
        .choose,main>a
        {
            width: 150px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center;
        }
        main>a
        {
            background-color: lightgreen;
        }
        .choose
        {
            background-color: lightgray;
        }
        ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
            display: none;
        }
        li
        {
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <script src="./jquery.js"></script>
    <main>
        <a>选择项目</a>
        <section class="choose">
            <a>未选择</a>
                <ul class="menu">
                    <li>html5</li>
                    <li>css3</li>
                    <li>javascript</li>
                    <li>jquery</li>
                </ul>
        </section>
    </main>
</body>
</html>

<script>
window.onload = function()
{
    var choose = $('.choose');
    $(choose).click(function(ev)
    {
        //阻止事件传播 可以阻止捕获、也可以阻止冒泡
        ev.stopPropagation();
        $('.menu').css('display','block');
        
    });

    var lis = $('.menu').children('li');
    $(lis).each(function()
    {
        $(this).hover(
            function()
            {
                $(this).css('background-color','lightgray');
            },
            function()
            {
                $(this).css('background-color','white');
            }
            );

        $(this).mousedown(function()
        {
            $(choose.children('a')).html($(this).html());
            $('.menu').css('display','none');
        });
    });

        $('body').click(function()
        {
            $('.menu').css('display','none');
        });
    
}

</script>